<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Cache-Control" content="max-age=72000" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>智能AI-chatgpt</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.45/vue.global.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.28/index.css" rel="stylesheet" />
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.5/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.28/index.full.js"></script>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="centerit" id="hello-vue">
    <div class="chat-container">
      <main>
        <div class="top-bar">
          <div class="user-info">
            <div class="user-head">
              <img src="image/ai.png">
            </div>
            <div class="name">智能AI</div>
            <div class="status online"></div>
          </div>
          <div class="buttons">
            <div class="call">
              <a href="https://github.com/lovefc/chat-page">
                <svg class="icon" width="50px" height="50.00px" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M512 0C229.283787 0 0.142041 234.942803 0.142041 524.867683c0 231.829001 146.647305 428.553077 350.068189 497.952484 25.592898 4.819996 34.976961-11.38884 34.976961-25.294314 0-12.45521-0.469203-45.470049-0.725133-89.276559-142.381822 31.735193-172.453477-70.380469-172.453477-70.380469-23.246882-60.569859-56.816233-76.693384-56.816234-76.693385-46.493765-32.58829 3.540351-31.948468 3.540351-31.948467 51.356415 3.71097 78.356923 54.086324 78.356923 54.086324 45.683323 80.19108 119.817417 57.072162 148.993321 43.593236 4.649376-33.91059 17.915029-57.029508 32.50298-70.167195-113.675122-13.222997-233.151301-58.223843-233.1513-259.341366 0-57.285437 19.919806-104.163095 52.678715-140.846248-5.246544-13.265652-22.820334-66.626844 4.990615-138.884127 0 0 42.996069-14.076094 140.760939 53.787741 40.863327-11.644769 84.627183-17.445825 128.177764-17.6591 43.465272 0.213274 87.271782 6.014331 128.135109 17.6591 97.679561-67.906489 140.59032-53.787741 140.59032-53.787741 27.938914 72.257282 10.407779 125.618474 5.118579 138.884127 32.844219 36.683154 52.593405 83.560812 52.593405 140.846248 0 201.586726-119.646798 245.990404-233.663158 258.957473 18.341577 16.208835 34.721032 48.199958 34.721032 97.210357 0 70.167195-0.639822 126.7275-0.639823 143.960051 0 14.033439 9.213443 30.370239 35.190235 25.209005 203.250265-69.527373 349.769606-266.123484 349.769605-497.867175C1023.857959 234.942803 794.673558 0 512 0"
                    fill="#3E75C3" />
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="messages" id="messages" ref="scrollDiv">
          <div v-for="msg in listMsg">
            <div class="message" :class="[msg.is_user?'fromme':'']">
              <div class="user-head">
                <img :src="msg.avatar">
              </div>
              <div class="content"><pre>{{ msg.msg }}</pre></div>
            </div>
          </div>
          <div class="message" id="loading" v-show="isShow">
            <div class="user-head">
              <img src="image/ai.png">
            </div>
            <div class="content">
              <div class="loadingThree"><span></span><span></span><span></span><span></span><span></span><span></span>
              </div>
            </div>
          </div>
          <!--<div class="date-split">接口最近有一些不稳定,可以多试几下</div>-->
        </div>
        <div class="bottom-bar">
          <textarea class="msg-input" id="msg-input" type="textarea" v-model="prompt" placeholder="输入内容"
            rows="10"></textarea>
          <div class="send-button" @click="buttonStatus && submitForm()" :style="buttonColor()">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
              y="0px" viewBox="0 0 512.076 512.076" style="enable-background:new 0 0 512.076 512.076;"
              xml:space="preserve">
              <g>
                <path
                  d="M509.532,34.999c-2.292-2.233-5.678-2.924-8.658-1.764L5.213,225.734c-2.946,1.144-4.967,3.883-5.192,7.034
                       c-0.225,3.151,1.386,6.149,4.138,7.7l102.719,57.875l35.651,174.259c0.222,1.232,0.723,2.379,1.442,3.364
                       c0.072,0.099,0.131,0.175,0.191,0.251c1.256,1.571,3.037,2.668,5.113,3c0.265,0.042,0.531,0.072,0.795,0.088
                       c0.171,0.011,0.341,0.016,0.511,0.016c1.559,0,3.036-0.445,4.295-1.228c0.426-0.264,0.831-0.569,1.207-0.915
                       c0.117-0.108,0.219-0.205,0.318-0.306l77.323-77.52c3.186-3.195,3.18-8.369-0.015-11.555c-3.198-3.188-8.368-3.18-11.555,0.015
                       l-60.739,60.894l13.124-112.394l185.495,101.814c1.868,1.02,3.944,1.239,5.846,0.78c0.209-0.051,0.4-0.105,0.589-0.166
                       c1.878-0.609,3.526-1.877,4.574-3.697c0.053-0.094,0.1-0.179,0.146-0.264c0.212-0.404,0.382-0.8,0.517-1.202L511.521,43.608
                       C512.6,40.596,511.824,37.23,509.532,34.999z M27.232,234.712L432.364,77.371l-318.521,206.14L27.232,234.712z M162.72,316.936
                       c-0.764,0.613-1.429,1.374-1.949,2.267c-0.068,0.117-0.132,0.235-0.194,0.354c-0.496,0.959-0.784,1.972-0.879,2.986L148.365,419.6
                       l-25.107-122.718l275.105-178.042L162.72,316.936z M359.507,419.195l-177.284-97.307L485.928,66.574L359.507,419.195z" />
              </g>
            </svg>
          </div>
        </div>
      </main>
    </div>
  </div>
</body>
<script src="js/web-storage-cache.min.js"></script>
<script src="js/Dream-Msg/lib/dream-msg.min.js"></script>
<script src="common.js?v=0.01"></script>

</html>